
<script>
export default {
  name: 'SearchBlock',
  props: {
    searchFormList: {
      type: Object,
      default: () => {}
    },
    searchFormData: {
      type: Object,
      default: () => {}
    },
    loading: {
      type: Boolean,
      default: false
    }
  },

  methods: {
    // 搜索按钮
    searchBtn () {
      this.$emit('get-Data', this.searchFormData)
    },

    // 重置按钮
    resetBtn () {
      this.$refs.form.resetFields()
      this.$emit('get-Data', {})
    }
  },

  render () {
    // 创建输入框
    const createInput = (item) => {
      const model = this.searchFormData[item.prop]
      return <el-input
        value={model}
        onInput={(value) => this.$set(this.searchFormData, item.prop, value)}
        clearable
        placeholder={item.placeholder}
      />
    }

    // 创建下拉选择
    const createSelect = (item) => {
      const model = this.searchFormData[item.prop]
      return (
        <el-select
          value={model}
          clearable
          onInput={(value) => this.$set(this.searchFormData, item.prop, value)}
        >
          {item.data.map((item, index) => (
            <el-option
              key={index}
              label={item.label}
              value={item.label}
            />
          ))}
        </el-select>
      )
    }
    return (
      <el-form
        ref='form'
        inline={true}
        props = {{ model: this.searchFormData }} // 直接定义到props中
        label-width='80px'
        class='search-form'
      >
        {this.searchFormList.form.map(item => (
          <el-form-item prop={item.prop}>
            {item.type === 'input' && createInput(item)}
            {item.type === 'select' && createSelect(item)}
          </el-form-item>
        ))}

        {/* 按钮组 */}
        <el-form-item class='query-action'>
          <el-button type='primary' loading={this.loading} disabled={this.loading} onClick={this.searchBtn}> 搜索 </el-button>
          <el-button loading={this.loading} disabled={this.loading} onClick={this.resetBtn}> 重置 </el-button>
          { this.searchFormList.btnCustomRender && this.searchFormList.btnCustomRender() }
        </el-form-item>
      </el-form>
    )
  }
}
</script>
